<template>
  <div class="flex flex-row w-full h-[calc(100vh-64px)]">
    <div class="w-240px max-w-240px min-w-240px h-full min-h-full flex flex-col bg-white">
      <div class="mt-40px mb-24px ml-20px text-16px text-#C2C5C5">个人中心</div>
      <div class="w-full h-full">
        <ul class="w-full">
          <li
            :class="[
              'pl-24px w-full h-40px mt-4px mb-8px flex items-center cursor-default',
              index === selectIndex && 'bg-[#6b39ff] text-white'
            ]"
            v-for="(item, index) in menu"
            :key="index"
            @click="handleClick(item.pathName)"
          >
            <img
              :src="handleImage(index === selectIndex ? item.iconName + '-s' : item.iconName)"
              alt="profile"
              class="w-18px h-18px object-cover"
            />
            <span class="ml-10px">{{ item.title }}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="w-full h-full min-h-100vh bg-[#F8F8F8] px-40px pt-48px text-14px text-[#333]">
      <router-view></router-view>
    </div>
  </div>
</template>
<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const menu = [
  {
    iconName: 'profile',
    path: 'edit-info',
    pathName: 'EditInfo',
    title: '我的资料'
  },
  {
    iconName: 'follow2',
    path: 'follow',
    pathName: 'Follow',
    title: '关注'
  },
  {
    iconName: 'wallet',
    path: 'wallet',
    pathName: 'Wallet',
    title: '钱包'
  },
  {
    iconName: 'order',
    path: 'order',
    pathName: 'Order',
    title: '订单'
  }
]
const handleClick = (path) => {
  router.push({ name: path })
}
const handleImage = (iconName) => {
  const url = new URL(`../../assets/${iconName}.png`, import.meta.url)
  return url
}

const selectIndex = computed(() => {
  return menu.findIndex((item) => route.name.includes(item.pathName))
})
</script>
<style lang="less" scoped></style>
